import React from 'react';
import { Table, Input, message, Spin } from 'antd';
import Api from 'Utils/api';
import { formatUtcTime } from '../../../../../utils/index';
import './index.scss';

const PAGE_SIZE = 9;
const Search = Input.Search;
class KnowledgeResult extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      totalCount: 0,
      list: [],
      listPage: 1,
      search: '',
      isLoading: true
    };
    this.initData = ::this.initData;
  }
  componentDidMount() {
    this.initData();
  }
  initData() {
    const { listPage, search } = this.state;
    const query = {};
    query.limit = PAGE_SIZE;
    query.offset = (listPage - 1) * PAGE_SIZE;
    if (search) { query.phone_like = search; }
    const self = this;
    const api = new Api({
      method: 'GET',
      path: '/testers/admin',
      query,
      success: (json) => {
        self.setState({
          list: json.data_list,
          totalCount: json.total_count,
          isLoading: false,
        });
      },
      error: (msg) => {
        self.setState({
          isLoading: false,
        });
        message.error(msg, 3);
      },
    });
    api.run();
  }
  onListPageChange(page) {
    this.setState({ listPage: page, isLoading: true }, () => { this.initData(); });
  }
  generatorColumns() {
    return [
      {
        title: '测试类别',
        dataIndex: 'type',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '测评者',
        dataIndex: 'name',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '联系电话',
        dataIndex: 'phone',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '得分',
        dataIndex: 'score',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '测评结果',
        dataIndex: 'result',
        render: text => (
          <span style={{ color: text ? '#00FFBF' : '#F45757' }}>{text ? '及格' : '不及格'}</span>
        )
      },
      {
        title: '测评时间',
        dataIndex: 'modify_time',
        render: text => (
          <span >{formatUtcTime(text)}</span >
        )
      }
    ];
  }
  handleSearch(value) {
    this.setState({
      listPage: 1,
      search: value.trim(),
      isLoading: true
    }, () => {
      this.initData();
    });
  }
  render() {
    const columns = this.generatorColumns();
    return (
      <div className="table-wrap">
        <div className="search">
          <Search
            placeholder="查询"
            onSearch={this.handleSearch.bind(this)}
          />
        </div>
        <Spin size="large" spinning={this.state.isLoading} tip="加载中...">
          <Table
            rowKey={record => record.result_id}
            columns={columns}
            bordered
            dataSource={this.state.list}
            pagination={{
              pageSize: PAGE_SIZE,
              total: this.state.totalCount,
              current: this.state.listPage,
              onChange: this.onListPageChange.bind(this)
            }}
          />
        </Spin>
      </div>
    );
  }
}

export default KnowledgeResult;
